<template>
    <div style="background:#f8f8f9">
        <div class="search">
            <label>商品名：</label>
            <i-input v-model="value" placeholder="请输入..." style="width: 200px" class="ipunts"></i-input>
            <i-button type="primary" shape="circle" icon="ios-search" @click="search">搜索</i-button>
        </div>
        <div class="action">
            <Button type="primary" icon="plus-round" @click="modal1 = true" style="text-aglin:center">新建</Button>
            <Button type="success" icon="wrench" @click="revise">修改</Button>
            <Button type="error" icon="trash-a" @click="deleted">删除</Button>
        </div>
        <div>
             <i-table  highlight-row border :columns="columns1" :data="data1" @on-selection-change="s=>{change2(s)}"></i-table>
        </div>
            <Page :total="1000" show-elevator class="page" @on-change="e=>{pageSearch(e)}"/> 
        <!-- 分页功能 -->
        <Modal v-model="modal1" title="新建商品">
            <Input v-model="newProduct.name" placeholder="商品名称" clearable style="width: 200px" class="Modals"/>
            <Input v-model="newProduct.subtitle" placeholder="商品副标题" clearable style="width: 200px" class="Modals"/>
            
            <div class="upload">
                <label class="label">选择图片</label><Upload
                    :before-upload="handleUpload"
                    :data='uploadData'>
                    <Button icon="ios-cloud-upload-outline">Select the file to upload</Button>
                </Upload>
                <div style="margin-left:20px;line-height:24px" v-if="file !== null">Upload file: {{ file.name }}</div>
             </div>

            <Input v-model="newProduct.detail" placeholder="商品详情" clearable style="width: 200px" class="Modals"/>
            <Input v-model="newProduct.price" placeholder="价格" clearable style="width: 200px" class="Modals"/>
            <Input v-model="newProduct.stock" placeholder="库存数量" clearable style="width: 200px" class="Modals"/>
            <Select v-model="datasel" style="width:200px" class="Select" @on-change="e=>{change(e)}">
                <Option v-for="item in stocklist" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="define">确定</Button>
             </div>
        </Modal>

        <Modal v-model="modal2" title="修改用户信息" width="40%">
            <div class="box">
                <div><label>商品名称:</label><Input v-model="reviseShop.name" clearable style="width: 200px"/></div>
                <div><label>商品副标题:</label><Input v-model="reviseShop.subtitle" clearable style="width: 200px"/></div>

                <div class="upload">
                    <label class="label">更新图片</label><Upload
                        :before-upload="reviserhandleUpload"
                        :data='uploadData'>
                        <Button icon="ios-cloud-upload-outline">Select the file to upload</Button>
                    </Upload>
                    <div style="margin-left:20px;line-height:24px" v-if="file !== null">Upload file: {{ file.name }}</div>
                </div>

                <div><label>商品详情:</label><Input v-model="reviseShop.detail" clearable style="width: 200px"/></div>
                <div><label>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</label> <Input v-model="reviseShop.price" clearable style="width: 200px"/></div>
                <div><label>库存数量:</label> <Input v-model="reviseShop.stock" clearable style="width: 200px"/></div>
                <div><label>商品状态:</label> <Input v-model="reviseShop.status" clearable style="width: 200px"/></div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="reviseShopInfo">确定</Button>
             </div>
        </Modal>
    </div>
</template>
<script>
export default {
    name:"shop",
    data(){
        return{
            columns1: [    ///表格表头的数据
                {type: 'selection',width: 60,align: 'center'},
                {title: '商品名称',key: 'name',align: 'center'},
                {title: '商品副标题',key: 'subtitle',subtitle: 'center'},
                {title: '图片',key: 'main_image',align: 'center',render: (h, params) => {
                return h('div', [
                    h('img', {
                        domProps: {
                            src: params.row.main_image
                        },
                        style: {
                            width: '40px',
                            height: '40px',
                            borderRadius: '50%',
                            verticalAlign: 'middle',
                        }
                    }),
                ]);
            }},
                {title: '商品详情',key: 'detail',align: 'center'},
                {title: '价格',key: 'price',align: 'center'},
                {title: '库存数量',key: 'stock',align: 'center'},
                {title: '商品状态',key: 'status',align: 'center'}
            ],
            modal1:false,     //控制对话框的属性
            modal2:false,     //控制对话框的属性
            datasel:"",
            loadingStatus: false,
            stocklist:[
                {
                    value: '1',
                    label: '1-在售'
                },
                {
                    value: '2',
                    label: '2-下架'
                },
                {
                    value: '3',
                    label: '3-删除'
                }
            ],
            // ------------新建商品实体类--------------------
             newProduct:{
                  name:"",
                  subtitle:"",
                  detail:"",
                  price:"",
                  stock:"",
                  status:"",
                  imgUrl: "", //定义临时存储上传的文件路径
                  imgID:""
            },
            // ------------新建商品实体类--------------------
            // ------------修改商品信息实体类--------------------
            reviseShop:{
                  name:"",
                  subtitle:"",
                  detail:"",
                  price:"",
                  stock:"",
                  status:"",
                  imgUrl: "", //定义临时存储上传的文件路径
                  imgID:""
            },
            // ------------修改商品信息实体类--------------------
            file:null,
            data1:[],          //定义商品列表的数组
            selectnum : 0,    //定义选择的数据量===用于判断
            reviseArray : []  //定义选择商品的临时数组
        }
    },
    created(){
        this.getProductList();
    },
    methods:{
        handleUpload (file) {  //对上传的文件临时存储
            this.file = file //需要传给后台的file文件
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
                const _base64 = reader.result
                this.newProduct.imgUrl = _base64
            }
            this.newProduct.imgID = file.name.replace(".png","")
            return false//阻止图片继续上传，使得form表单提交时统一上传
        },
        reviserhandleUpload(file){
            this.file = file //需要传给后台的file文件----修改文件的操作
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
                const _base64 = reader.result
                this.reviseShop.imgUrl = _base64
            }
            this.reviseShop.imgID = file.name.replace(".png","")
            return false//阻止图片继续上传，使得form表单提交时统一上传
        },
        change(e){
            this.newProduct.status = e
        },
        change2(e){
            this.selectnum = e.length
            this.reviseArray = e
        },
        define(){
            let data = this.newProduct
            //对属性进行校验
            for (const key in data){
                if (data.hasOwnProperty(key)) {
                     if (data[key] === null || data[key] === ''){
                        this.$Notice.open({
                            title: "有空选项"
                        })
                        return;
                     }
                }
            }
            //上传数据
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'users/addproduct',
                data:data
            }).then((res)=>{
                if(res.data.code == "800000"){
                    this.$Notice.open({
                        title: res.data.mess
                    })
                    this.file = null
                    this.datasel = ""
                    for (const key in this.newProduct){
                        if (this.newProduct.hasOwnProperty(key)) {
                            this.newProduct[key] = ""
                        }
                    }
                    this.getProductList()
                }
            })
        },
        getProductList(){
            this.$http({
                 method:"get",
                 url:this.$util.baseUrl+'users/getproductlist',
            }).then((res)=>{
                // console.log(res)
                this.data1 = res.data.data
            })
        },
        revise(){
            //点击修改触发的事件
            if(this.selectnum<1 || this.selectnum>1){
                    this.$Message.warning('请至少选择一项(且只能选择一项)'); 
                    return;
            }
            this.modal2 = true;
            //给修改商品信息的实体类赋值
                this.reviseShop.name = this.reviseArray[0].name
                this.reviseShop.subtitle = this.reviseArray[0].subtitle
                this.reviseShop.detail = this.reviseArray[0].detail
                this.reviseShop.price = this.reviseArray[0].price
                this.reviseShop.stock = this.reviseArray[0].stock
                this.reviseShop.status = this.reviseArray[0].status
                this.reviseShop.imgUrl = this.reviseArray[0].main_image
                let start = this.reviseShop.imgUrl.indexOf("images/")+7
                let end = this.reviseShop.imgUrl.indexOf(".png")
                this.reviseShop.imgID = this.reviseShop.imgUrl.substring(start,end)
        },
        reviseShopInfo(){
            let data = this.reviseShop
            // console.log(this.reviseShop)
            // 上传修改的数据
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'users/reviseproduct',
                data:data
            }).then((res)=>{
                console.log(res)
            })  
        }
    }
}
</script>
<style lang="less" scoped>
    .search{
        width: 100vw;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        label{
            margin-left: 20px;
            margin-right: 20px;
            font-size: 20px;
        }
        .ipunts{
            margin-right: 90px;
        }
    }
    .action{
        width: 100vw;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        Button{
            margin-left: 10px;
            margin-right: 10px;
        }
    }
    .Modals{
        margin-bottom: 30px;
        margin-right: 30px;
    }
    .box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
    .box>div{
        margin-bottom: 30px;
        margin-right: 30px;
    }
    .box>div>label{
        display: inline-block;
        width: 90px;
    }
    .page{
        height: 50px;
        margin-left: 900px;
        margin-top: 30px;
    }
    .upload{
        display: flex;
        margin-bottom: 20px; 
        margin-left: -0.4rem;
    }
    .label{
        display: block;
        line-height: 30px;
        margin-right: 10px;
    }
    .Select{
        margin-top: -30px;
    }
</style>